<template>
    <view class="content">
        <view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
            <view class="main-title dispaly-center"
                :style="{ height: systemInfo.sBarHeight + 'px', lineHeight: systemInfo.sBarHeight + 'px' }">
                <view class="nav-top dispaly-just-between" :style="{ 'width': 750 - barWidth * 2 + 'rpx' }">
                    <view class="back" @click="navTo(`back`)">
                        <tn-icon name="left" color="#000" size="40" />
                    </view>
                </view>
            </view>

        </view>
        <view class="form " :style="{ marginTop: topNavheight + 'px' }">
            <view class="title dispaly-center">
                <view>基本信息</view>
                <view class="d dispaly-align-center">待完成</view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item"> <text class="x">*</text>报考地区</view>
                <view class="up-item dispaly-just-between" @click="bkShow = true">
                    <!-- <view class="text">{{ bkData?.name ? bkData?.name : '请选择报考地区' }}</view> -->
                    <view class="text"
                        v-if="!bkData?.name && !submitFormData.area_name && !submitFormData.city_name && !submitFormData.pro_name">
                        请选择报考地区</view>
                    <view class="text" v-else>{{ bkData?.name ? bkData?.name : submitFormData.pro_name + '-' +
                        submitFormData.city_name + '-' + submitFormData.area_name }}</view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item">出生日期</view>
                <view class="up-item dispaly-just-between" @click="openDateTimePicker = true">
                    <view class="text">{{ submitFormData.birthday ? submitFormData.birthday : '请选择出生日期' }}</view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>

            <view class="block dispaly-just-between">
                <view class="gz-zm zm w-48">
                    <view class="form-item">性别</view>
                    <view class="up-item dispaly-just-between" @click="xbOpenPicker = true">
                        <view class="text" v-if="submitFormData.sex != 1 && submitFormData.sex != 2">请选择性别</view>
                        <view class="text" v-if="submitFormData.sex == 1">男</view>
                        <view class="text" v-if="submitFormData.sex == 2">女</view>
                        <view class="right">
                            <tn-icon name="right" color="#b7b7b7" size="40" />
                        </view>
                    </view>
                </view>
                <view class="gz-zm zm w-48">
                    <view class="form-item">民族</view>
                    <view class="up-item dispaly-just-between">
                        <input v-model="submitFormData.nation" placeholder="请输入民族" />
                    </view>
                </view>
            </view>

            <view class="gz-zm zm">
                <view class="form-item">户籍所在地</view>
                <view class="up-item dispaly-just-between" @click="hjShow = true">
                    <view class="text"
                        v-if="!hjData?.name && !submitFormData.birth_area_name && !submitFormData.birth_city_name && !submitFormData.birth_pro_name">
                        请选择报考地区</view>
                    <view class="text" v-else>{{ hjData?.name ? hjData?.name : submitFormData.birth_pro_name + '-' +
                        submitFormData.birth_city_name + '-' + submitFormData.birth_area_name }}</view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>

            <view class="gz-zm zm">
                <view class="form-item">生源地</view>
                <view class="up-item dispaly-just-between" @click="sydopenRegionPicker = true">
                    <view class="text">{{ submitFormData.student ? submitFormData.student : '请选择生源地' }}</view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>

            <view class="gz-zm zm">
                <view class="form-item">政治面貌</view>
                <view class="up-item dispaly-just-between">
                    <view class="text">
                        <input type="text" v-model="submitFormData.policy_out" placeholder="请输入">
                    </view>
                </view>
            </view>
            <view class="title dispaly-center">
                <view>教育经历</view>
                <view class="d dispaly-align-center">待完成</view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item">学历</view>
                <view class="up-item dispaly-just-between">
                    <view class="text">
                        <input type="text" placeholder="请输入" v-model="submitFormData.edu">
                    </view>
                </view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item">专业</view>
                <view class="up-item dispaly-just-between">
                    <view class="text">
                        <input type="text" placeholder="请输入" v-model="submitFormData.special">
                    </view>
                </view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item">学历性质</view>
                <view class="up-item dispaly-just-between">
                    <view class="text">
                        <input type="text" placeholder="请输入" v-model="submitFormData.edu_nature">
                    </view>
                </view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item">毕业学校</view>
                <view class="up-item dispaly-just-between">
                    <view class="text">
                        <input type="text" placeholder="请输入" v-model="submitFormData.graduate_school">
                    </view>
                </view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item">毕业时间</view>
                <view class="up-item dispaly-just-between" @click="byopenDateTimePicker = true">
                    <view class="text">{{ submitFormData.graduate_time ? submitFormData.graduate_time : '请选择毕业时间' }}
                    </view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>

            <view class="gz-zm zm ">
                <view class="form-item">择业期(视同应届生报考)</view>
                <view class="up-item dispaly-just-between" @click="zyqOpenPicker = true">
                    <view class="text" v-if="submitFormData.is_career != 1 && submitFormData.is_career != 2">请选择是否在择业期
                    </view>
                    <view class="text" v-if="submitFormData.is_career == 1">是</view>
                    <view class="text" v-if="submitFormData.is_career == 2">否</view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>

            <view class="gz-zm zm">
                <view class="form-item">学校招生批次</view>
                <view class="up-item dispaly-just-between" @click="pcOpenPicker = true">
                    <view class="text"> {{ submitFormData.batch ? submitFormData.batch : '请选择学校招生批次' }}</view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>

            <view class="gz-zm ">
                <view class="form-item">资格证书</view>
                <view class="up">
                    <UploadImage :type="1" :limit="5" @upload="data => submitFormData.quality = data" />
                </view>
            </view>
            <view class="title dispaly-center">
                <view>工作经历</view>
                <view class="d dispaly-align-center">待完成</view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item">基层工作年限</view>
                <view class="up-item dispaly-just-between" @click="nxOpenPicker = true">
                    <view class="text"> {{ submitFormData.work_year ? submitFormData.work_year : '请选择基层工作年限' }}</view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>
            <view class="gz-zm zm ">
                <view class="form-item">目前就业</view>
                <view class="up-item dispaly-just-between" @click="jyOpenPicker = true">
                    <view class="text" v-if="submitFormData.current_employ != 1 && submitFormData.current_employ != 2">
                        请选择是否目前就业
                    </view>
                    <view class="text" v-if="submitFormData.current_employ == 1">是</view>
                    <view class="text" v-if="submitFormData.current_employ == 2">否</view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>
            <view class="gz-zm zm">
                <view class="form-item">服务基层项目</view>
                <view class="up-item dispaly-just-between" @click="fwOpenPicker = true">
                    <view class="text"> {{ submitFormData.service_item ? submitFormData.service_item : '请选择服务基层项目' }}
                    </view>
                    <view class="right">
                        <tn-icon name="right" color="#b7b7b7" size="40" />
                    </view>
                </view>
            </view>
            <view class="btn-box1 w-100 dispaly-align-center" @click="submit">
                <view class="btn1 dispaly-align-center">保存</view>
            </view>
        </view>

        <!-- 出生日期 -->
        <tn-date-time-picker format="YYYY-MM-DD" v-model="submitFormData.birthday" v-model:open="openDateTimePicker"
            mode="date" min-time="1900-01-01" cancel-color="#eb4869" confirm-color="#388095"
            :init-current-date-time="false" />

        <!--性别  -->
        <tn-picker v-model="submitFormData.sex" v-model:open="xbOpenPicker" :data="xbPickerData" value-key="id"
            label-key="name" mask cancel-color="#eb4869" confirm-color="#388095" />

        <!-- 生源地所在地选择 -->
        <tn-picker v-model="submitFormData.student" v-model:open="sydopenRegionPicker" :data="cityList" mask
            cancel-color="#eb4869" confirm-color="#388095" value-key="name" label-key="name" />

        <!-- 毕业时间 -->
        <tn-date-time-picker format="YYYY-MM-DD" v-model="submitFormData.graduate_time"
            v-model:open="byopenDateTimePicker" min-time="1900-01-01" mode="date" cancel-color="#eb4869"
            confirm-color="#388095" :init-current-date-time="false" />

        <!--择业期 -->
        <tn-picker v-model="submitFormData.is_career" v-model:open="zyqOpenPicker" :data="zyqPickerData" value-key="id"
            label-key="name" mask cancel-color="#eb4869" confirm-color="#388095" />

        <!--学校招生批次 -->
        <tn-picker v-model="submitFormData.batch" v-model:open="pcOpenPicker" :data="noteData?.batch_list" mask
            cancel-color="#eb4869" confirm-color="#388095" />

        <!--年限 -->
        <tn-picker v-model="submitFormData.work_year" v-model:open="nxOpenPicker" :data="noteData?.work_year_list" mask
            cancel-color="#eb4869" confirm-color="#388095" />

        <!-- 目前就业 -->
        <tn-picker v-model="submitFormData.current_employ" v-model:open="jyOpenPicker" :data="jyPickerData"
            value-key="id" label-key="name" mask cancel-color="#eb4869" confirm-color="#388095" />

        <!--服务基层项目 -->
        <tn-picker v-model="submitFormData.service_item" v-model:open="fwOpenPicker" :data="noteData?.basic_item_list"
            mask cancel-color="#eb4869" confirm-color="#388095" />

        <!-- 报考地区 -->
        <addressPicker :address="address" :show="bkShow" @set-value="data => bkData = data"
            @close="show => bkShow = show" />
        <!-- 户籍所在地 -->
        <addressPicker :address="address" :show="hjShow" @set-value="data => hjData = data"
            @close="show => hjShow = show" />
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { ref, onMounted, reactive } from 'vue'
import { getElementHeight } from '@/utils/util'
import UploadImage from '@/components/uploadImage/uploadImage.vue'
import TnPicker from '@tuniao/tnui-vue3-uniapp/components/picker/src/picker.vue'
import TnDateTimePicker from '@tuniao/tnui-vue3-uniapp/components/date-time-picker/src/date-time-picker.vue'
import addressPicker from '@/components/address/addressPicker.vue';
import type { RequestMyJlType } from '@/types/requstParm'
import { getAddressTree, addNode, getJlDetail, getNoteConfig } from '@/api/home/home';
import { onShow } from '@dcloudio/uni-app';
import type { NoteConfigType } from '@/types/responseData'

// 获取简历配置
let noteData = ref<NoteConfigType>()
const getNoteConfigData = async () => {
    const res = await getNoteConfig()
    if (res.code == 0) {
        noteData.value = res.data
    }
}

let address = ref<string[] | any>([])
let cityList = ref<string[]>([])
const getAddressTreeData = async () => {
    const res = await getAddressTree()
    if (res.code == 0) {
        address.value = res.data[0].children
        cityList.value = address.value.map((item: any) => {
            return { name: item.name, id: item.id }
        })
    }
}

interface AddressValueType {
    name: string,
    idList: number[]
}

// 报考地区
const bkShow = ref<boolean>(false)
const bkData = ref<AddressValueType | any>({ name: '', idList: [] })

// 户籍所在地
const hjShow = ref<boolean>(false)
const hjData = ref<AddressValueType | any>({ name: '', idList: [] })


// 出生日期
const openDateTimePicker = ref<boolean>(false)

// 选择性别
let xbOpenPicker = ref<boolean>(false)
let xbPickerData = ref<Array<TPikerType>>([
    { name: '男', id: 1 },
    { name: '女', id: 2 },
])


// 生源地选择
const sydopenRegionPicker = ref<boolean>(false)

// 毕业时间
const byopenDateTimePicker = ref<boolean>(false)

// 选择择业期
let zyqOpenPicker = ref<boolean>(false)
let zyqPickerData = ref<Array<TPikerType>>([
    { name: '是', id: 1 },
    { name: '否', id: 2 },
])

// 招生批次
let pcOpenPicker = ref<boolean>(false)


// 基层工作年薪
let nxOpenPicker = ref<boolean>(false)


// 目前就业
let jyOpenPicker = ref<boolean>(false)
let jyPickerData = ref<Array<TPikerType>>([
    { name: '是', id: 1 },
    { name: '否', id: 2 },
])

// 服务基层项目
let fwOpenPicker = ref<boolean>(false)

// piker 数据类型
interface TPikerType {
    name: string,
    id: number,
    children?: TPikerType[]
}


// 递归查找name
const findNamesByIds = (ids: number[], data: TPikerType[]) => {
    ids.forEach((item, index) => ids[index] = Number(item))
    const names: string[] = [];
    // 递归函数，用于在嵌套结构中查找ID  
    function findByName(currentData: any, idsToFind: any) {
        for (const item of currentData) {
            if (idsToFind.includes(item.id)) {
                names.push(item.name);
                // 如果当前项有子项，并且我们还没有找到所有的ID，则递归查找  
                if (item.children && idsToFind.length > names.length) {
                    findByName(item.children, idsToFind.filter((id: number) => !names.some(nameItem => nameItem.includes(id.toString()))));
                }
            }
        }
    }
    // 调用递归函数  
    findByName(data, ids);
    return names;
}

// 提交
let submitFormData = reactive<RequestMyJlType>({
    user_id: 1,
    pro: '',
    city: '',
    area: '',
    birthday: '',
    sex: '',
    nation: '',
    birth_pro: '',
    birth_city: '',
    birth_area: '',
    student: '',
    policy_out: '',
    edu: '',
    special: '',
    edu_nature: '',
    graduate_time: '',
    graduate_school: '',
    is_career: '',
    batch: '',
    quality: '',
    work_year: '',
    current_employ: '',
    service_item: ''
})
const submit = async () => {
    delete submitFormData.pro_name
    delete submitFormData.city_name
    delete submitFormData.area_name
    delete submitFormData.birth_area_name
    delete submitFormData.birth_city_name
    delete submitFormData.birth_pro_name
    delete submitFormData.id

    try {
        submitFormData.pro = bkData?.value.idList[0]
        submitFormData.city = bkData.value.idList[1]
        submitFormData.area = bkData.value.idList[2]
        submitFormData.birth_pro = hjData.value.idList[0]
        submitFormData.birth_city = hjData.value.idList[1]
        submitFormData.birth_area = hjData.value.idList[2]
    } catch (error) { }
    const res = await addNode(submitFormData)
    if (res.code == 0) {
        uni.showToast({
            title: res.msg as string,
            icon: 'none'
        })
        getNodeDetailData()
    }

}

// 获取简历详情
const getNodeDetailData = async () => {
    const res = await getJlDetail({ user_id: 1 })
    if (res.code == 0) {
        submitFormData = res.data
        const { pro, city, area, pro_name, city_name, area_name, birth_pro, birth_city, birth_area, birth_pro_name, birth_city_name, birth_area_name } = submitFormData
        bkData.value.idList[0] = pro
        bkData.value.idList[1] = city
        bkData.value.idList[2] = area
        bkData.value.name = pro_name + '-' + city_name + '-' + area_name
        hjData.value.idList[0] = birth_pro
        hjData.value.idList[1] = birth_city
        hjData.value.idList[2] = birth_area
        hjData.value.name = birth_pro_name + '-' + birth_city_name + '-' + birth_area_name
        uni.setStorageSync('imgs', submitFormData.quality)
    }
}

const systemInfo = uni.getStorageSync('systemInfo')
const { barWidth } = uni.getStorageSync('capsule')
// 获取top高度
const topNavheight = ref<number | unknown>(0)
onMounted(async () => {
    getNoteConfigData()
    getAddressTreeData()
    getNodeDetailData()
    const height = await getElementHeight('.top')
    topNavheight.value = height
})
</script>

<style>
page {
    background: #fff;
}
</style>



<style lang="scss" scoped>
.active {
    border: 2rpx solid #008298;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #008298;
}

input {
    width: 600rpx;
}

.top {
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    background: rgb(155, 227, 229);
    background: linear-gradient(180deg, rgba(155, 227, 229, 1) 0%, rgba(255, 255, 255, 1) 76%, rgba(255, 255, 255, 1) 100%);
}

.ip {
    background: #F5F5F5;
    border-radius: 20rpx;
    padding: 0 30rpx;
}

.back {
    padding-left: 30rpx;
}

.x {
    color: #F90D0D;
}

.btn-box1 {
    margin-top: 92rpx;

    .btn1 {
        width: 523rpx;
        height: 84rpx;
        background: #008298;
        border-radius: 12rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
    }
}

.form-item {
    margin-bottom: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #646464;
}

.form {
    padding: 30rpx 30rpx 50rpx 30rpx;
    width: 750rpx;

    .zm {
        margin-bottom: 40rpx;

        input {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #AEAEAE;
            padding: 0 15rpx;
        }
    }

    .gz-zm {
        .up-item {
            height: 90rpx;
            background: #F5F5F5;
            border-radius: 20rpx;
            padding: 0 30rpx;

            .text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #AEAEAE;
            }
        }
    }

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 40rpx;
        color: #000000;
        margin-bottom: 37rpx;

        .d {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #008298;
            width: 89rpx;
            height: 35rpx;
            border-radius: 6rpx;
            border: 1rpx solid #008298;
            margin-left: 11rpx;
        }
    }

    .gz-ll {
        margin: 37rpx 0;

        .icon {
            image {
                width: 34rpx;
                height: 34rpx;
            }
        }

        .ipt {

            input {
                width: 600rpx;
                height: 90rpx;
                margin-right: 40rpx;
                margin-bottom: 20rpx;
            }

            .j {}
        }
    }

    .nl {
        .list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .list-item {
                margin: 10rpx 6rpx;
                width: 218rpx;
                height: 80rpx;
                background: #F5F5F5;
                border-radius: 15rpx;
            }
        }
    }

    .zw-js {
        margin-top: 40rpx;
        margin-bottom: 40rpx;

        .tea {
            .tea-ipt {
                width: 100%;
                height: 251rpx;
                background: #F5F5F5;
                border-radius: 20rpx;
                padding: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #AEAEAE;
            }
        }
    }
}

:deep(.tn-popup__content, ) {
    border-radius: 20rpx 20rpx 0 0;
}
</style>